<template>
  <div id="movie">
    <div class="movie-return">
      <router-link to="/"><Icon type="ios-arrow-left"></Icon></router-link>
      <!--搜索-->
      <input type="text" placeholder="搜索您中意的电影">
    </div>
    <div class="movie-loading" v-show="movieLoad">飞速加载中请您耐心等待</div>
    <div class="cut-line"></div>
    <!--正在热映-->
    <div class="movie-box">
      <p class="movie-title">正在热映<span>更多　<Icon type="ios-arrow-right"></Icon></span></p>
      <hotmovie :hotList="hotList"></hotmovie>
    </div>
    <div class="cut-line"></div>
    <!--即将上映-->
    <div class="movie-box">
      <p class="movie-title">院线即将上映<span>更多　<Icon type="ios-arrow-right"></Icon></span></p>
      <soonmovie></soonmovie>
    </div>
    <!--路由出口-->
    <router-view></router-view>
  </div>
</template>
<script type="text/ecmascript-6">
  /* eslint-disable  */
  import hotmovie from 'components/hotmovie/hotmovie.vue'
  import soonmovie from 'components/soonmovie/soonmovie.vue'
  export default{
    data () {
      return {
        url: 'in_theaters',
        hotList: [],
        movieLoad: true,
        count: '7'
      }
    },
    mounted () {
      this.$nextTick(() => {
        this._initData()
      })
    },
    methods: {
      _initData () {
        this.$http.jsonp('https://api.douban.com/v2/movie/' + this.url + '?count=' + this.count ).then(res => {
          this.hotList = res.data.subjects
          this.$nextTick(() => {
            this.movieLoad = false
          })
        }).catch(error => {
            console.log(error)
        })
      }
    },
    components: {
      hotmovie,
      soonmovie
    }
  }
</script>
<style>
  #movie{position: absolute; width: 100%; height: 100%; top: 0; background: #fff; z-index: 9999;}
  #movie .movie-return{padding:8px;position: relative; z-index: 1;display: flex; align-items: center;background: #fff;}
  #movie .movie-return a{display: inline-block;margin-right: 20px;opacity: 0.8}
  #movie .movie-return i{font-size: 28px; line-height: 28px;color: #00b43c;}
  #movie .movie-return input{ vertical-align: top;border-radius: 500px;padding-left: 35px;line-height: 24px;font-size: 12px; background: #f1f1f1;}
  #movie .movie-loading{text-align: center;line-height: 150px;font-size: 24px;position: fixed; width: 100%; height: 100%;top: 45px;background: #fff;z-index: 999;}
  #movie .movieWrapper li{display: inline-block;}
  #movie .movie-box{padding: 0 15px;}
  #movie .movie-title{font-size: 16px; color: #333;padding-top: 20px; padding-bottom: 8px;}
  #movie .movie-title span{float: right;color: #00b43c;}
</style>
